
<template>
  <div class="bh-container">
    <a-row justify="space-between" align="center" class="header page_header">
      <a-space wrap>
        <div class="title">系统日志</div>
      </a-space>
    </a-row>
    <a-tabs v-model:active-key="activeKey" type="card-gutter" size="large"  >
      <a-tab-pane key="1"    v-if="hasPermission('sys:log:loginLog')">
        <template #title>
          <icon-lock/>
          登录日志
        </template>
        <login-log    @open-details="(e) => LogDetailsRes.openInfo(e)"></login-log>
      </a-tab-pane>
      <a-tab-pane key="2" v-if="hasPermission('sys:log:operationLog')">
        <template #title>
          <icon-find-replace/>
          操作日志
        </template>
        <operation-log @open-details="(e) => LogDetailsRes.openInfo(e)"></operation-log>
      </a-tab-pane>

    </a-tabs>
    <LogDetails ref="LogDetailsRes" ></LogDetails>

  </div>
</template>

<script setup lang="ts">
import LoginLog from './login/index.vue'
import OperationLog from './operation/index.vue'
import LogDetails from './details/index.vue'
import usePermission from "@/hooks/permission";

const {hasPermission} = usePermission();
const activeKey = ref()
const LogDetailsRes =ref()
onBeforeMount(async () => {
  if(hasPermission('sys:log:loginLog')){
    activeKey.value ='1'
  }
  if(hasPermission('sys:log:operationLog') && !hasPermission('sys:log:loginLog')){
    activeKey.value ='2'
  }
});





</script>

<style scoped lang="less">
:deep(.arco-tabs-type-card-gutter){
  background: var(--color-bg-1);
  padding: 10px;
}
:deep(.arco-tabs-content){
  background: var(--color-bg-1);
  padding: 10px 0;
}
:deep(.arco-tabs .arco-tabs-nav-type-card-gutter .arco-tabs-tab-active) {
  box-shadow: inset 0 2px 0 rgb(var(--primary-6)),  inset -1px 0 0 var(--color-border-2),inset 1px 0 0 var(--color-border-2);
  position: relative;
}
:deep(.arco-tabs-nav-type-card-gutter .arco-tabs-tab) {
  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}
:deep(.arco-tabs-type-card-gutter > .arco-tabs-content) {
  border: none;
}
:deep(.arco-tabs-nav::before) {
  left: -20px;
  right: -20px;
}

:deep(.arco-tabs-nav) {
  overflow: visible;
}
</style>